<!DOCTYPE html>
<html>
<head>
    <title>Relativity Problem Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="relativityCanvas" width="800" height="350"></canvas>
    <script>
        const canvas = document.getElementById('relativityCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
            ctx.closePath();
        }

        // Helper function to draw a fraction
        function drawFraction(ctx, numerator, denominator, x, y, fontHeight) {
            const originalAlign = ctx.textAlign;
            ctx.textAlign = 'center';
            // Numerator
            ctx.fillText(numerator, x, y - fontHeight * 0.2);
            // Fraction line
            const numWidth = ctx.measureText(numerator).width;
            const denWidth = ctx.measureText(denominator).width;
            const lineWidth = Math.max(numWidth, denWidth) + 4;
            ctx.beginPath();
            ctx.moveTo(x - lineWidth / 2, y);
            ctx.lineTo(x + lineWidth / 2, y);
            ctx.stroke();
            // Denominator
            ctx.fillText(denominator, x, y + fontHeight);
            ctx.textAlign = originalAlign;
        }

        // --- Main Drawing ---

        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        const baseY = 280;
        const axisY = 300;
        const shipHeight = 60;
        const shipWidth = 120;
        const gap = 60;
        const shipTopY = baseY - shipHeight;

        // Draw Axis
        ctx.font = '20px Times New Roman';
        drawArrow(ctx, 30, axisY, 770, axisY);
        ctx.fillText('S系', 40, axisY + 25);
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('x', 775, axisY + 5);

        // --- Ship 1 ---
        const ship1_x_back = 100;
        const ship1_x_front = ship1_x_back + shipWidth;
        
        // Box
        ctx.beginPath();
        ctx.moveTo(ship1_x_back, baseY);
        ctx.lineTo(ship1_x_back, shipTopY);
        ctx.lineTo(ship1_x_front, shipTopY);
        ctx.lineTo(ship1_x_front, baseY);
        ctx.moveTo(ship1_x_back, shipTopY + 20); // Inner line to make it look like a container
        ctx.lineTo(ship1_x_front, shipTopY + 20);
        ctx.stroke();
        
        // Labels for Ship 1
        ctx.font = 'bold 24px Arial';
        ctx.fillText('1', ship1_x_back + shipWidth/2 - 8, baseY - 20);
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('(l₀)', ship1_x_back + shipWidth/2 - 15, shipTopY - 10);

        // Velocity 1
        const v1_arrow_y = shipTopY - 30;
        drawArrow(ctx, ship1_x_back + 30, v1_arrow_y, ship1_x_front - 30, v1_arrow_y);
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('v', 135, v1_arrow_y - 15);
        ctx.font = '16px Times New Roman';
        ctx.fillText('1', 145, v1_arrow_y - 10);
        ctx.font = '22px Times New Roman';
        ctx.fillText('=', 155, v1_arrow_y - 15);
        drawFraction(ctx, '2', '5', 180, v1_arrow_y-22, 16);
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('c', 200, v1_arrow_y - 15);

        // Position Marker P1
        ctx.setLineDash([5, 3]);
        ctx.beginPath();
        ctx.moveTo(ship1_x_back, baseY);
        ctx.lineTo(ship1_x_back, axisY);
        ctx.stroke();
        ctx.setLineDash([]);
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('P', ship1_x_back - 10, axisY + 25);
        ctx.font = '14px Times New Roman';
        ctx.fillText('1', ship1_x_back, axisY + 28);

        // --- Ship 2 ---
        const ship2_x_back = ship1_x_front + gap;
        const ship2_x_front = ship2_x_back + shipWidth;
        
        // Box
        ctx.beginPath();
        ctx.moveTo(ship2_x_back, baseY);
        ctx.lineTo(ship2_x_back, shipTopY);
        ctx.lineTo(ship2_x_front, shipTopY);
        ctx.lineTo(ship2_x_front, baseY);
        ctx.moveTo(ship2_x_back, shipTopY + 20);
        ctx.lineTo(ship2_x_front, shipTopY + 20);
        ctx.stroke();

        // Labels for Ship 2
        ctx.font = 'bold 24px Arial';
        ctx.fillText('2', ship2_x_back + shipWidth/2 - 8, baseY - 20);
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('(l₀)', ship2_x_back + shipWidth/2 - 15, shipTopY - 10);

        // Velocity 2
        const v2_arrow_y = shipTopY - 30;
        drawArrow(ctx, ship2_x_back + 30, v2_arrow_y, ship2_x_front - 30, v2_arrow_y);
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('v', 315, v2_arrow_y - 15);
        ctx.font = '16px Times New Roman';
        ctx.fillText('2', 325, v2_arrow_y - 10);
        ctx.font = '22px Times New Roman';
        ctx.fillText('=', 335, v2_arrow_y - 15);
        drawFraction(ctx, '3', '5', 360, v2_arrow_y-22, 16);
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('c', 380, v2_arrow_y - 15);

        // Position Marker P2
        ctx.setLineDash([5, 3]);
        ctx.beginPath();
        ctx.moveTo(ship2_x_back, baseY);
        ctx.lineTo(ship2_x_back, axisY);
        ctx.stroke();
        ctx.setLineDash([]);
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('P', ship2_x_back - 10, axisY + 25);
        ctx.font = '14px Times New Roman';
        ctx.fillText('2', ship2_x_back, axisY + 28);
        
        // --- Ship 3 ---
        const ship3_x_back = ship2_x_front + gap;
        const ship3_x_front = ship3_x_back + shipWidth;

        // Box
        ctx.beginPath();
        ctx.moveTo(ship3_x_back, baseY);
        ctx.lineTo(ship3_x_back, shipTopY);
        ctx.lineTo(ship3_x_front, shipTopY);
        ctx.lineTo(ship3_x_front, baseY);
        ctx.moveTo(ship3_x_back, shipTopY + 20);
        ctx.lineTo(ship3_x_front, shipTopY + 20);
        ctx.stroke();

        // Labels for Ship 3
        ctx.font = 'bold 24px Arial';
        ctx.fillText('3', ship3_x_back + shipWidth/2 - 8, baseY - 20);
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('(l₀)', ship3_x_back + shipWidth/2 - 15, shipTopY - 10);
        
        // Velocity 3
        const v3_arrow_y = shipTopY - 30;
        drawArrow(ctx, ship3_x_back + 30, v3_arrow_y, ship3_x_front - 30, v3_arrow_y);
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('v', 495, v3_arrow_y - 15);
        ctx.font = '16px Times New Roman';
        ctx.fillText('3', 505, v3_arrow_y - 10);
        ctx.font = '22px Times New Roman';
        ctx.fillText('=', 515, v3_arrow_y - 15);
        drawFraction(ctx, '4', '5', 540, v3_arrow_y-22, 16);
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('c', 560, v3_arrow_y - 15);

        // Position Marker P3
        ctx.setLineDash([5, 3]);
        ctx.beginPath();
        ctx.moveTo(ship3_x_front, baseY);
        ctx.lineTo(ship3_x_front, axisY);
        ctx.stroke();
        ctx.setLineDash([]);
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('P', ship3_x_front - 10, axisY + 25);
        ctx.font = '14px Times New Roman';
        ctx.fillText('3', ship3_x_front, axisY + 28);

        // --- Distance Markers L ---
        const L_arrow_y = baseY - 5;
        // L between 1 and 2
        drawArrow(ctx, ship2_x_back, L_arrow_y, ship1_x_front, L_arrow_y);
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('L', (ship1_x_front + ship2_x_back)/2 - 5, L_arrow_y - 10);
        // L between 2 and 3
        drawArrow(ctx, ship3_x_back, L_arrow_y, ship2_x_front, L_arrow_y);
        ctx.fillText('L', (ship2_x_front + ship3_x_back)/2 - 5, L_arrow_y - 10);

    </script>
</body>
</html>